<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*table {*/
        /*border-collapse: collapse;*/
    /*}*/
    /*table td {*/
        /*border:1px solid #0D0D01;*/
    /*}*/


</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>任务项查询</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label for="query-proCode">项目编号</label>
                                    <input id="query-proCode" type="text" name="proCode" class="form-control"
                                           placeholder="请输入项目编号">
                                </div>
                                <div class="form-group">
                                    <label for="query-proName">项目名称</label>
                                    <input id="query-proName" type="text" name="proName" class="form-control"
                                           placeholder="请输入项目名称">
                                </div>
                                <div class="form-group">
                                    <label for="query-malType">类型</label>
                                    <select id="query-malType" class="form-control" name="special">
                                        <option value="" selected>请选择</option>
                                        <option th:each="type : ${specialId}" th:value="${type.name}"
                                                th:text="${type.name}"></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="query-part">部位</label>
                                    <input id="query-part" type="text" name="part" class="form-control"
                                           placeholder="请输入部分">
                                </div>
                                <div class="form-group">
                                    <label for="query-status">任务类型</label>
                                    <select id="query-status" class="form-control" name="taskType">
                                        <option value="" selected="selected">请选择</option>
                                        <option value="原料提报">原料提报</option>
                                        <option value="外协提报">外协提报</option>
                                        <option value="工艺编制">工艺编制</option>
                                        <option value="机加定额">机加定额</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="query-deptName">工艺科室</label>
                                    <select id="query-deptName" class="form-control" name="postDept">
                                        <option value="" selected>请选择</option>
                                        <option th:each="type : ${deptName}" th:value="${type.name}"
                                                th:text="${type.name}"></option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="query-postName">员工姓名</label>
                                    <input id="query-postName" type="text" name="postName" class="form-control"
                                           placeholder="请输入员工姓名">
                                </div>
                                <div class="form-group">
                                    <label for="query-startTime">提报日期</label>
                                    <input id="query-startTime" type="text" class="form-control datepicker"
                                           name="startTime"
                                           readonly="readonly"/>
                                    <label for="query-endTime"> 至 </label>
                                    <input id="query-endTime" type="text" class="form-control datepicker" name="endTime"
                                           readonly="readonly"/>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search"
                                        onclick="js.table.search(table)">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table" style="width: 99.9%;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table;
    var statusType = ["", "未开始", "执行中", "已完成", "不需要"];
    var statusColor = ["", "", "#f39c12", "#00a65a", "#00acd6"];

    function yearSelectCreate() {
        var myDate = new Date();
        var endYear = myDate.getFullYear();
        for (var i = endYear; i >= 2016; i--) {
            if (i === 2016)
                $("#query-year").append("<option value='" + i + "'>" + i + "年及以前" + "</option>");
            else
                $("#query-year").append("<option value='" + i + "'>" + i + "年" + "</option>");
        }
    }

    /**
     * 合并单元格
     * @param data 原始数据（在服务端完成排序）
     * @param fieldName 合并依据属性名称
     * @param spanFieldName 合并属性名称
     * @param colspan 合并列
     * @param target 目标表格对象
     */
    function mergeCells(data, fieldName, spanFieldName, colspan, target) {
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for (var i = 0; i < data.rows.length; i++) {
            for (var prop in data.rows[i]) {
                if (prop == fieldName) {
                    var key = data.rows[i][prop]
                    if (sortMap.hasOwnProperty(key)) {
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        var index = 0;
        for (var prop in sortMap) {
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells', {
                index: index,
                field: spanFieldName,
                colspan: colspan,
                rowspan: count
            });
            index += count;
        }
    }

    $(function () {
        yearSelectCreate();

        /** 设计进度列表 */
        table = js.table.init({
            url: ctx + "craft/ComprehensiveQuery/query",
            onLoadSuccess: function (data) {
                // mergeCells(data, "proId", "rowNumber", 1, $('#bootstrap-table')); //合并单元格
                mergeCells(data, "proCode", "proCode", 1, $('#bootstrap-table')); //合并单元格
                mergeCells(data, "proCode", "proName", 1, $('#bootstrap-table')); //合并单元格
                mergeCells(data, "proCode", "proNum", 1, $('#bootstrap-table')); //合并单元格
            },
            showExport: false,
            columns: [
                // {
                //
                //     title: '序号', field: 'id', width: '50',
                //     formatter: function (value, row, index) {
                //         return index + 1;
                //     }
                // },
                {title: "项目编号", field: 'proCode'},
                {title: "项目名称", field: 'proName'},
                {title: "数量", field: 'proNum'},
                {title: "类型", field: 'special'},
                {title: "部位", field: 'part'},
                {title: "参与任务", field: 'taskType'},
                {title: "科室", field: 'postDept'},
                {title: "员工", field: 'postName'},
                {title:'校对人',field:'verifyName'},
                {title: "提报日期", field: 'createTime'}
            ]
        });
    });
</script>
</body>
</html>
